<template>
	<div>
		<div class="head">
			<a @click="getBack" class="return"></a>
			实名认证
		</div>
		<div class="overlay" style="padding: 20px 10px 10px;">
			<div class="overlay-content scrolling" align="center">
				<div v-if="type == 0 || type == 2">
					<div style="width: 99%;border: 1px solid rgba(134, 144, 171, 0.3);padding-bottom: 10px;">
						<img :src="img" style="width: 95%;padding-top: 10px;max-height: 200px;" @click="file()" />
					</div>
					<div style="width: 99%;border: 1px solid rgba(134, 144, 171, 0.3);margin-top: 20px;padding-bottom: 10px;">
						<img :src="img2" style="width: 95%;padding-top: 10px;max-height: 200px;" @click="file2()" />
					</div>
					<div style="width: 99%;text-align: left;color: #E64340;margin-top: 10px;background-color: #344B7D;padding: 10px 10px;font-size: 14px;" v-if="type == 2">
						<span>驳回信息：</span>
						<span v-text="idcardRemark"></span>
					</div>
					<div style="padding-top: 10px;">
						<van-cell-group>
							<van-field placeholder="请输入姓名" maxlength="10" type="text" v-model.trim="trueName" />
						</van-cell-group>
						<van-cell-group>
							<van-field placeholder="请输入身份证号码" maxlength="18" type="text" v-model.trim="idCard" />
						</van-cell-group>
					</div>
					<div class="btn">
						<x-button type="primary" :show-loading="loading" @click.native="sure">提交申请</x-button>
					</div>
					<input type="file" id="file" accept="image/png,image/jpg,image/jpeg" @change="change($event)" style="display:none;">
					<input type="file" id="file2" accept="image/png,image/jpg,image/jpeg" @change="change2($event)" style="display:none;">
				</div>
				<div v-if="type == 3">
					<div class="box">
						<span>
							<img src="../assets/images/ver.png" style="width: 50%;display: table-cell;vertical-align: middle;"/>
							<span style="padding-top: 55%;">实名认证中，请耐心等候...</span>
						</span>
					</div>
				</div>
				<div v-if="type == 1">
					<div style="height: 140px;background-color: rgb(31,160,120);border-radius: 5px;">
						<van-row gutter="20">
							<van-col span="8" style="padding: 30px 0px;">
								<img src="../assets/images/mylogo.png" style="width: 80px;height: 80px;" />
							</van-col>
							<van-col span="8" style="padding: 40px 0px;text-align: left;">
								<span v-text="trueName">家政与</span>
								<p style="padding-top: 10px;" v-text="idCard">

								</p>
							</van-col>
							<van-col span="8" style="padding-top: 10px;">
								<img src="../assets/images/yrz.png" style="height: 20px;" />
							</van-col>
						</van-row>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	import { base64 } from 'vux';
	import { encryptDes, decryptDes } from './../utils/des';
	import { base } from './../utils/api';
	export default {
		data() {
			return {
				mydate: '', // 当前的年月
				type: this.$route.query.type, //  0:未提交  1:已审核 2:驳回 3:已提交未审核
				idCard: '',
				trueName: '',
				loading: false,
				k: '', // 凭证K值
				v: '', // 凭证V值
				img: require("../assets/images/sf1.png"), // 身份证人像面
				img2: require("../assets/images/sf2.png"), // 身份证国徽面
				idcardRemark: '' // 驳回信息
			}
		},
		watch: {
			idCard: function() {
				this.idCard = this.idCard.replace(/[\u4e00-\u9fa5]/ig, ' '); // 身份证号码不能输入中文
			}
		},
		mounted() {
			// 获取当前的年月日
			let date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let strDate = date.getDate();
			if(month >= 1 && month <= 9) {
				month = "0" + month;
			}
			if(strDate >= 0 && strDate <= 9) {
				strDate = "0" + strDate;
			}
			let currentdate = year + month + strDate;
			this.mydate = currentdate;
			if(this.type == 1 || this.type == 2) {
				this.idCard = decryptDes(base64.decode(this.$route.query.idCard), this.mydate, this.$route.query.type);
				this.trueName = decryptDes(base64.decode(this.$route.query.trueName), this.mydate, this.$route.query.type);
				if(this.type == 2){
					this.idcardRemark = this.$route.query.idcardRemark;
				}
			}
		},
		methods: {
			file() {
				document.getElementById('file').click()
			},
			file2() {
				document.getElementById('file2').click()
			},
			change(e) {
				let file = e.target.files[0];
				let param = new FormData();
				param.append('file', file, file.name);
				let config = {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				}; //添加请求头
				this.axios.post(process.env.API_HOST + 'upload/images', param, config).then(res => {
					this.img = res.data.data[0].url;
					Toast(res.data.msg);
				})
			},
			change2(e) {
				let file = e.target.files[0];
				let param = new FormData();
				param.append('file', file, file.name);
				let config = {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				}; //添加请求头
				this.axios.post(process.env.API_HOST + 'upload/images', param, config).then(res => {
					this.img2 = res.data.data[0].url;
					Toast(res.data.msg);
				})
			},
			sure() {
				if(this.img.includes("data:image")) {
					Toast('身份证人像面不能为空');
					return false;
				}
				if(this.img2.includes("data:image")) {
					Toast('身份证国徽面不能为空');
					return false;
				}
				if(this.trueName == '') {
					Toast('姓名不能为空');
					return false;
				}
				if(this.idCard == '') {
					Toast('身份证号码不能为空');
					return false;
				}
				base.getCredentials().then(res => {
					if(res.code == 8008) {
						this.k = res.data.k;
						this.v = res.data.v;
						base.getSetIdCard({
							'key': this.k,
							'front': this.img,
							'verso': this.img2,
							'encryptedData': this.rsaEncrypt(this.trueName + ','  + this.idCard + ','  + this.v)
						}).then(res => {
							if(res.code == 200){
								setTimeout(() => {
									this.loading = false;
									this.type = 3;
								}, 500);
							}else if(res.code == 500){
								this.loading = false;
							}
							Toast(res.msg);
						})
					}
				})
			},
			getBack(){
				if(this.$route.query.roid){
					this.$router.push({path: '/'});
				}else{
					this.$router.push({path: '/Safety'});
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.head~.overlay {
		top: 44px;
	}
	
	.van-cell {
		background-color: #344B7D;
		color: #FFFFFF;
		font-size: 15px;
		padding: 15px;
	}
	
	[class*=van-hairline] {
		position: unset;
		border-bottom: 1px solid #1a2e58;
	}
	
	.van-hairline--top-bottom::after {
		border: 0;
	}
	
	.btn {
		padding: 30px 10px 30px;
	}
	
	/deep/ .van-field__control {
		color: #FFFFFF;
	}
	
	.box span {
		height: 50%;
		overflow: auto;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
	}
	
	/deep/ .van-row {
		margin-left: 0px!important;
		margin-right: 0px!important;
	}
</style>